<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--Meta Informations-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Site Title-->
    <title>注册</title>

    <!--Favicons-->
    <link rel="apple-touch-icon" sizes="60x60" th:href="@{assets/favicon/logo2.png}">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo5.png}" sizes="32x32">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo4.png}" sizes="16x16">
    <link rel="manifest" th:href="@{assets/favicon/manifest.json}">
    <link rel="mask-icon" th:href="@{assets/favicon/safari-pinned-tab.svg}" color="#5bbad5">
    <link rel="shortcut icon" th:href="@{assets/favicon/logo3.png}">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!--Style Assets-->
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{vendors/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{vendors/owl/owl.carousel.css}">
    <link rel="stylesheet" th:href="@{vendors/magnific/magnific-popup.css}">

    <!--Theme Style-->
    <link rel="stylesheet" th:href="@{assets/css/styles.css}">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>

<div id="page" class="site row">

    <header id="header" class="site-header">

        <nav class="navbar navbar-defatult navbar-fixed-top fluid-navbar navbar-style1">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a th:href="@{/}" class="navbar-brand">
                        <img th:src="@{assets/icons/logo9.png}" alt="" class="logo-img"/></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"
                            aria-expanded="false">
                        <span class="sr-only">Nav Opener</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="main-nav">
                    <ul class="navbar-nav nav navbar-right">
                        <li><a th:href="@{/}">主页</a></li>
                        <li><a th:href="@{login}"><i class="fa fa-sign-in"></i>登录</a></li>
                        <li class="active"><a th:href="@{register}"><i class="fa fa-user"></i> 注册 </a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--Page Cover-->
        <section class="row page-cover" data-slide="assets/images/slide1.jpg">
            <div class="container">
                <h2 class="this-title">欢迎注册 Mlearning</h2>
            </div>
        </section>
    </header>

    <main id="contents" class="site-contnts">
        <!--404 Contents-->
        <section class="row contact-form-section" style="background: #f2f6f8;">
            <div class="container">
                <ul class="nav nav-tabs nav-justified hstab" role="tablist">
                    <li role="presentation"><a href="#hst-1" aria-controls="hst-1" role="tab" style="cursor: default">注册信息*</a>
                    </li>
                    <li role="presentation" class="active"><a id="tag-2" href="#hst-2" aria-controls="hst-2" role="tab"
                                                              data-toggle="tab">兴趣填写</a></li>
                    <li role="presentation"><a href="#hst-3" aria-controls="hst-3" role="tab" data-toggle="tab">VPS
                        Hosting</a></li>
                    <li role="presentation"><a href="#hst-4" aria-controls="hst-4" role="tab" data-toggle="tab">Dedicated
                        Hosting</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content hst-contents">
                    <div role="tabpanel" class="tab-pane" id="hst-1">

                    </div>
                    <div role="tabpanel" class="tab-pane active" id="hst-2">
                        <div class="row">
                            <div class="col-md-7">
                                <h3>选择你感兴趣的 <strong>知识点</strong> 吧！</h3>

                                <form name="love_konw">
                                    <div class="form-group">
                                        <aside class="row widget widget_tag_cloud">
                                            <div class="tagcloud">
                                                <input type="checkbox" id="e1" name="" style="visibility: hidden"
                                                       value="">
                                                <label for="e1" class="tag-link-1">Hosting</label>
                                                <a href="#" class="tag-link-1" title="Shared Hosting">Shared Hosting</a>
                                                <a href="#" class="tag-link-1" title="VPS">VPS</a>
                                                <a href="#" class="tag-link-1" title="Web">Web</a>
                                                <a href="#" class="tag-link-1" title="Domain Reg">Domain Reg</a>
                                                <a href="#" class="tag-link-1" title="Web Hosting">Web Hosting</a>
                                                <a href="#" class="tag-link-1" title="WordPress Hosting">WordPress
                                                    Hosting</a>
                                                <a href="#" class="tag-link-1" title="Host">Host</a>
                                                <a href="#" class="tag-link-1" title="Website">Website</a>
                                            </div>
                                        </aside>
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-5 col-plan">
                                <div class="hst-plan row">
                                    <ul class="plan-list nav">
                                        <li><i class="fa fa-bolt"></i><strong>Fast &amp; Simple</strong> WordPress
                                            Hosting
                                        </li>
                                        <li><i class="fa fa-mouse-pointer"></i><strong>1-Click Staging</strong>
                                            Environment
                                        </li>
                                        <li><i class="fa fa-gear"></i>All-in-One Control Panel</li>
                                        <li><i class="fa fa-tachometer"></i>Host up to <strong>100 Websites</strong>
                                        </li>
                                        <li><i class="fa fa-gear"></i><strong>1TB Monthly</strong> Bandwidth</li>
                                        <li><i class="fa fa-gear"></i><strong>20 GB SSD</strong> Storage</li>
                                        <li><i class="fa fa-life-bouy"></i>24/7/365 <strong>Live Support</strong></li>
                                    </ul>
                                    <div class="media hst-plan-price">
                                        <div class="media-body">
                                            Price starting from <span
                                                class="price"><sup>$</sup>20<sub>/month</sub></span>
                                        </div>
                                        <div class="media-right"><a href="#" class="btn btn-default">choose plan</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!--Footer-->
    <footer id="footer" class="site-footer">
        <!--Footer Bottom-->
        <section class="row site-footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 widget-footer">
                        <div class="row widget-content">
                            <ul class="menu">
                                <li style="color: white">鲁ICP备20006308</li>
                                <li>
                                    <a target="_blank"
                                       href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37011202000992"
                                       style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                                        <img th:src="@{assets/images/beian.png}" style="float:left;"/>
                                        <p style="float:left;height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">
                                            鲁公网安备 37011202000992号</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </footer>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{vendors/jquery.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{vendors/owl/owl.carousel.min.js}"></script>
<script th:src="@{vendors/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{vendors/magnific/jquery.magnific-popup.min.js}"></script>
<script th:src="@{vendors/isotope.pkgd.min.js}"></script>
<script th:src="@{vendors/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{vendors/form-validator/jquery.form.js}"></script>
<script th:src="@{vendors/form-validator/jquery.validate.min.js}"></script>

<script th:src="@{assets/js/contact.js}"></script>
<!--Theme JS-->
<script th:src="@{assets/js/hostpro.js}"></script>
</body>
</html>